<template>
    <div class="role-container">
        <div>
            <el-button @click="handleAdd" type="primary">新增角色</el-button>
        </div>
        <el-table class="table-box" :data="roles" style="width: 100%">
            <el-table-column prop="name" label="name" width="180" />
            <el-table-column prop="isPublic" label="isPublic" width="180" />
            <el-table-column prop="isDefault" label="isDefault" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small"
                               @click="handleEditClcik(scope.$index, scope.row)"
                    >编辑</el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >Delete</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-box">
            <el-pagination
                v-model:current-page="roleParams.pageIndex"
                v-model:page-size="roleParams.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :small="true"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                @size-change="getTenants"
                @current-change="getTenants"
            />
        </div>
        <RoleDialog @hanldeRequest="getAllRoles" :type="editType" :editObject="editObject" v-model:dialogVisible="dialogVisible"/>
        <RoleMenuDialog :routeDatas="routeDatas" :roleId="roleId" v-model:dialogVisible="dialogMenuVisible"/>
    </div>
</template>

<script setup>
import RoleDialog from "./components/RoleDialog.vue"
import RoleMenuDialog from "./components/RoleMenuDialog.vue"
import { ElMessage, ElMessageBox } from 'element-plus'

import { reactive, ref, watch } from 'vue'
import {rolesAll,rolesDelete,rolesPage} from "@/api/roles"
import {menuHook} from "@/hooks/menu"
defineOptions({
  name: "Role2",
});
const dialogVisible = ref(false);
const dialogMenuVisible = ref(false);
const editType = ref('add');
const editObject = ref(null);
const roleId = ref('');
const roles = ref([]);
function handleAdd() {
  editType.value = 'add';
  editObject.value = null;
  dialogVisible.value = true;
}

const roleParams = ref({
  pageIndex:1,
  pageSize:10
})
const totalCount = ref(0)

async function getAllRoles() {
  const res = await rolesPage(roleParams.value);
  roles.value = res.items;
  totalCount.value = res?.totalCount ?? 0;
}
getAllRoles();

const {routeDatas} = menuHook();

function handleMenuClick(index,row) {
  dialogMenuVisible.value = true;
  roleId.value = row.id;

}

function handleEditClcik(index,row) {
  editObject.value = row;
  editType.value = 'edit';
  dialogVisible.value = true;
}

function handleDelete(index,row) {

  ElMessageBox.confirm(
    '是否删除?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      await rolesDelete({id:row.id})
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      getAllRoles();
    })


}


</script>

<style lang="scss" scoped>
.role-container {
padding: 20px;
}
.table-box {
margin-top: 10px;
// height: 100px;
}
.pagination-box {
margin-top: 15px;
}
</style>